<template>
	<view class="pages">
		<view class="header">
			<view class="header-left">
				<view class="icon" @tap="back"></view>
				<view class="header-desc">我的收藏</view>
			</view>
		</view>
		<view class="source">
				<view class="video-item">
					<view class="video-list"  v-for="(v,index) in 2" :key="index">
						<video src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/video/goods.mp4" class="goods-icon"></video>
						<view class="goods-bottom">
							<view class="goods-title">标题</view>
							<view class="goods-desc">描述</view>
							<view class="detail">
								<view class="goods-left">
									<image src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/images/smile-filling.svg" class="name-icon"></image>
									<view class="name">店铺名称</view>
								</view>
								<view class="goods-right">
									<image src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/images/like.svg" class="name-icon"></image>
									<view class="name">2.8w</view>
								</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
		
	</view>
</template>

<script setup>
	const back=()=>{
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.pages{
		width: 100%;
		min-height: 100vh;
		background-color: #F1F2F4;
		overflow: hidden;
		overflow-y: scroll;
		.header{
			width: 100%;
			height: 180rpx;
			background-color: #fff;
			overflow: hidden;
			.header-left{
				width: 500rpx;
				height: 170rpx;
				margin-left: 16rpx;
				display: flex;
				align-items: center;
				margin: 60rpx 68rpx 16rpx 24rpx;
				.icon{
					// border: 3rpx solid #101010;
					border-left: 4rpx solid #101010;
					border-top: 4rpx solid #101010;
					transform: rotate(-45deg);
					width: 24rpx;
					height: 24rpx;
					
				}
				.header-desc{
					margin-left: 12rpx;
					color: #303030;
					font-size: 32rpx;
				}
			}
			
		}
		.source{
				width: calc(100% - 60rpx);
				margin: 0 auto;
				margin-top: 24rpx;
				.video-item{
					display: flex;
					justify-content: space-between;
					width: 100%;
					flex-wrap: wrap;
					.video-list{
						width: calc(50% - 20rpx);
						background-color: #fff;
						margin-top: 24rpx;
						overflow: hidden;
						border-radius: 20rpx;
						.goods-icon{
							width: 100%;
							height: 352rpx;
						}
						.goods-bottom{
							margin-top: 14rpx;
							margin-left: 18rpx;
							padding-bottom: 14rpx;
							.goods-title{
								color: #101010;
								font-size: 32rpx;
								font-weight: 600;
							}
							.goods-desc{
								color: #8D8D8D;
								font-size: 28rpx
							}
							.detail{
								display: flex;
								justify-content: space-between;
								margin-top: 4rpx;
								.goods-left{
									display: flex;
									.name-icon{
										width: 40rpx;
										height: 40rpx;
									}
									.name{
										font-size: 24rpx;
										color: #8D8D8D;
										margin-left: 8rpx;
									}
								}
								.goods-right{
									display: flex;
									.name-icon{
										width: 40rpx;
										height: 40rpx;
									}
									.name{
										font-size: 24rpx;
										color: #8D8D8D;
										margin-right: 24rpx;
										margin-left: 8rpx;
									}
								}
							}
						}
					}
				}
				
			}
		
	}
</style>